<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <TableCustom
          :total="page.total"
          :current-page="page.index"
          :page-size="page.size"
          :changePage="changePage"

          :columns="columns"
          :tableData="tableData"
          :viewFunc="handleView"
          :delFunc="handleDelete"
          :editFunc="handleEdit">
        <template #toolbarBtn>
          <el-button type="warning" @click="visible = true">
            新增
          </el-button>
        </template>
      </TableCustom>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
               :close-on-click-modal="false" @close="closeDialog">
      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
    </el-dialog>

    <!-- 查看详情弹窗 -->
    <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
      <TableDetail :data="viewData"></TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { User } from '@/types/user';
import { getAllUsers, updateUser, deleteUser } from '@/api/user';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import TableEdit from "@/components/table-edit.vue";

// 查询相关
const query = reactive({
  name: '',
});
const searchOpt = ref<FormOptionList[]>([
  { type: 'input', label: '用户名：', prop: 'name' }
]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: 'index', label: '序号', width: 55, align: 'center' },
  { prop: 'username', label: '用户名' },
  { prop: 'role', label: '角色' },
  { prop: 'operator', label: '操作', width: 200, align: 'center', slot: 'operator' }
]);

const page = reactive({
  index: 1,
  size: 4,
  total: 0,
});

const tableData = ref<User[]>([]);
// 获取用户数据
const getData = async () => {
  // 假设 getAllUsers 返回的是一个对象，包含 total 和 rows
  const res = await getAllUsers(page.index, page.size, query.name);
  console.log(res);  // 查看返回数据
  tableData.value = res.data.rows;
  page.total = res.data.total;
};
getData();
// 分页处理
const changePage = (val: number) => {
  console.log("当前页码："+val)
  page.index = val;
  getData();
};
// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: '100px',
  span: 12,
  list: [
    { type: 'input', label: '用户名', prop: 'username', required: true },
    { type: 'input', label: '密码', prop: 'password', required: true },
  ]
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref<User>({} as User);
const handleEdit = (row: User) => {
  rowData.value = { ...row };
  isEdit.value = true;
  visible.value = true;
};
const updateData = async () => {
  try {
    await updateUser(rowData.value.id, rowData.value);
    ElMessage.success('用户信息更新成功');
    await getData();
    closeDialog();
  } catch (error) {
    ElMessage.error('更新失败');
  }
};
const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};
// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: []
});
const handleView = (row: User) => {
  viewData.value.row = { ...row };
  viewData.value.list = [
    { prop: 'id', label: '用户ID' },
    { prop: 'username', label: '用户名' },
    { prop: 'password', label: '密码' },
    { prop: 'role', label: '角色' },
  ];
  visible1.value = true;
};
// 删除用户
const handleDelete = async (row: User) => {
  try {
    await deleteUser(row.username);
    ElMessage.success('删除成功');
    await getData();
  } catch (error) {
    ElMessage.error('删除失败');
  }
};
</script>

<style scoped></style>
